<template>
    <div class="mainContext">
        <el-card class="box-card">
            <el-select class="sel_man" v-model="selectid.did" @change="didChange" filterable placeholder="请选择宿舍楼">
                <el-option label=" 不限" value="null"></el-option>
                <el-option
                        v-for="item in dormitoryData"
                        :key="item.did"
                        :label="item.dname"
                        :value="item.did">
                </el-option>
            </el-select>
            <el-select class="sel_man" v-model="selectid.rid" @change="didChange" filterable placeholder="请选择宿舍门牌号">
                <el-option label=" 不限" value="null"></el-option>
                <el-option
                        v-for="item in rids"
                        :key="item.rid"
                        :label="item.rid"
                        :value="item.rid">
                </el-option>
            </el-select>
            <el-button class="add_btn" type="primary" @click="addDialog=true" >添加</el-button>
            <el-table class="table"
                      :data="roomData"
                      stripe
                      height="550"
                      style="width: 100% ;min-height:250px">
                <el-table-column
                        prop="rid"
                        label="宿舍门牌号">
                </el-table-column>
                <el-table-column
                        prop="dormitory.dname"
                        label="所属宿舍楼">
                </el-table-column>
                <el-table-column
                        prop="galleryful"
                        label="容纳量">
                </el-table-column>
                <el-table-column
                        prop="occupancy"
                        label="已入住">
                </el-table-column>

                <el-table-column

                        label="操作">
                    <template #default="scope">
                        <el-button @click="delRow(scope.row)" type="text" size="small">删除</el-button>
                        <el-button  @click="updateRow(JSON.parse(JSON.stringify( scope.row )))" type="text" size="small">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <el-dialog
                title="添加寝室"
                v-model="addDialog"
                width="500px"
                :before-close="handleClose">
            <el-form  :model="roomInfo" class="form" ref="roomInfo" :rules="roomRules"  label-width="100px">
                <el-form-item label="宿舍门牌号" prop="rid">
                    <el-input v-model="roomInfo.rid" placeholder="请输入宿舍门牌号"></el-input>
                </el-form-item>
                <el-form-item label="容纳量" prop="galleryful">
                    <el-input v-model="roomInfo.galleryful" placeholder="请输入容纳量"></el-input>
                </el-form-item>
                <el-form-item label="所属宿舍楼" prop="did">

                    <el-select class="sel_man" v-model="roomInfo.did" filterable placeholder="请选择宿舍楼">
                        <el-option
                                v-for="item in dormitoryData"
                                :key="item.did"
                                :label="item.dname"
                                :value="item.did">
                        </el-option>
                    </el-select>


                </el-form-item>

                <el-form-item style="margin-left: -50px !important;">
                    <el-form-item class="el-col-lg-push-5" >
                        <el-button type="primary" @click="addRoom">提交</el-button>
                        <el-button @click="resetForm('roomInfo')">重置</el-button>
                    </el-form-item>



                </el-form-item>

            </el-form>
        </el-dialog>

        <el-dialog
                title="修改寝室"
                v-model="updateDialog"
                width="500px"
                :before-close="handleClose">
            <el-form  :model="roomInfo" class="form" ref="roomupdate" :rules="roomRules"  label-width="80px">
                <el-form-item label="宿舍门牌号" prop="rid">
                    <el-input v-model="roomInfo.rid" placeholder="请输入宿舍门牌号"></el-input>
                </el-form-item>
                <el-form-item label="容纳量" prop="galleryful">
                    <el-input v-model="roomInfo.galleryful" placeholder="请输入容纳量"></el-input>
                </el-form-item>
                <el-form-item label="所属宿舍楼" prop="did">

                    <el-select class="sel_man" v-model="roomInfo.did" filterable placeholder="请选择宿舍楼">
                        <el-option
                                v-for="item in dormitoryData"
                                :key="item.did"
                                :label="item.dname"
                                :value="item.did">
                        </el-option>
                    </el-select>


                </el-form-item>

                <el-form-item style="margin-left: -50px !important;">
                    <el-form-item class="el-col-lg-push-5" >
                        <el-button type="primary" @click="updateRoom">提交</el-button>
                        <el-button @click="resetForm('roomupdate')">重置</el-button>
                    </el-form-item>



                </el-form-item>

            </el-form>
        </el-dialog>
    </div>
</template>

<script>
    import api from "../api";

    export default {
        name: "Room",
        data(){
            return{
                addDialog:false,
                updateDialog:false,
                roomData:[],
                dormitoryData:[],
                rids:[],
                roomInfo:{
                    "id":null,
                    "rid":"",
                    "did":"",
                    "galleryful":null
                },
                roomRules:{
                    "id":{required: true, message: '该项不可空', trigger: 'blur'},
                    "rid":{required: true, message: '该项不可空', trigger: 'blur'},
                    "did":{required: true, message: '该项不可空', trigger: 'blur'},
                    "galleryful":{required: true, message: '该项不可空', trigger: 'blur'},
                },
                selectid:{
                    rid:null,
                    did:null,
                    pageNum:null,
                    pageSize:null
                }
            }
        },
        methods:{
            updateRoom(){
                this.$refs["roomupdate"].validate((valid) => {
                    if (valid) {
                        api.post("/room/update",this.roomInfo).then(res=>{
                            if(res.state){
                                this.loadData({});
                                this.$message.success("数据提交成功!")
                                this.updateDialog=false
                                this.cleanData();
                            }else{
                                this.$message.error("数据提交出错!")
                            }
                        }).catch(res=>{
                            this.$message.error("服务器出错了!")
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            addRoom(){
                this.$refs["roomInfo"].validate((valid) => {
                    if (valid) {
                        api.post("/room/save",this.roomInfo).then(res=>{
                            if(res.state){
                                this.loadData({});
                                this.$message.success("数据提交成功!")
                                this.addDialog=false
                                this.cleanData();
                            }else{
                                this.$message.error("数据提交出错!")
                            }
                        }).catch(res=>{
                            this.$message.error("服务器出错了!")
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            didChange(){
                let data = JSON.parse(JSON.stringify(this.selectid));
                this.loadData(data)

            },
            delRow(Row){
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    api.post("/room/delete",{id:Row.id}).then(res=>{
                        if(res.state){
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.loadData({});
                        }else{
                            this.$message({
                                type: 'success',
                                message: '删除失败!'
                            });
                        }
                    }).catch(res=>{
                        this.$message({
                            type: 'success',
                            message: '服务器出错了!'
                        });
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            updateRow(Row){
                this.updateDialog=true;
                this.roomInfo =Row;
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        this.cleanData();
                        done();
                    })
                    .catch(_ => {});
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            cleanData(){
                this.roomInfo={
                    "id":null,
                        "rid":"",
                        "did":"",
                        "galleryful":null
                }
            },
            loadData(args1) {
                api.post("/room/list",args1).then(res => {
                    // console.log(res.data.list)
                    if(res.state)
                        this.roomData=res.data.list;
                    else{
                        this.$message.error("数据加载出错")
                    }

                }).catch(res=>{
                    console.log(res)
                    this.$message.error("服务器出错了!")
                });
                api.post("/dormitory/list",{}).then(res=>{

                    if(res.state)
                        this.dormitoryData=res.data.list;
                    else{
                        this.$message.error("数据加载出错")
                    }

                }).catch(res=>{
                    console.log(res)
                    this.$message.error("服务器出错了!")
                });
            },
        },
        mounted(){
            this.loadData({})
            api.post("/room/listrid",{}).then(res => {
                // console.log(res.data.list)
                if(res.state)
                    this.rids=res.data;
                else{
                    this.$message.error("数据加载出错")
                }

            }).catch(res=>{
                console.log(res)
                this.$message.error("服务器出错了!")
            });

        }
    }
</script>

<style  lang="scss">
    .mainContext {
        margin: 100px auto;
        text-align: center;

        .box-card{
            width: 1000px;
            margin: 0px auto;
            border-radius: 10px;
            box-shadow: #ccc 10px 10px 10px;
            .add_btn{
                float: right;
                margin: 0px 50px 20px 10px;
            }
            .el-card{
                border-radius:10px;

                .sel_man{
                    width: 200px;
                    margin-right: 15px;
                }

            }


        }
        .form{
            .sel_man{
                width: 100%;
            }
        }
        .cell{
            text-align: center;
        }

    }
</style>